@layer theme, base, components, utilities;
/* 不设置 layer 生成的样式就不会包含在里面*/
@import "tailwindcss/theme.css";
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

@layer components {
  .flex-y-center {
    @apply flex items-center;
  }

  .flex-x-center {
    @apply flex justify-center;
  }

  .flex-center {
    @apply flex items-center justify-center;
  }


  .flex-x-between {

    @apply flex justify-between;
  }

  .flex-x-around {
    @apply flex justify-around;

  }

  .flex-x-evenly {
    @apply flex justify-evenly;
  }

  .flex-y-between {
    @apply flex flex-col justify-between;
  }

  .flex-x-between-center {
    @apply flex justify-between items-center
  }

  .flex-x-around-center {
    @apply flex justify-around items-center;

  }

  .flex-x-evenly-center {
    @apply flex justify-evenly items-center;

  }

  .flex-y-around-center {
    @apply flex flex-col justify-around items-center;

  }

  .flex-y-between-center {
    @apply flex flex-col justify-between items-center;

  }

  .flex-y-evenly-center {
    @apply flex flex-col justify-evenly items-center;

  }

  .scroll-bar {
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: transparent;
      border-radius: 4px;
    }

    &:hover {
      &::-webkit-scrollbar-thumb {
        background-color: #c8c8c9;
      }
    }
  }
}

* {
  box-sizing: border-box;
}

a {
  -webkit-user-drag: none;

}

img {
  -webkit-app-region: drag;

  /* 禁止拖动 */
  -webkit-user-drag: none;
  /* Chrome, Safari, Edge */
  -khtml-user-drag: none;
  /* Konqueror */
  -moz-user-drag: none;
  /* Firefox */
  user-drag: none;
  /* 标准属性 */

  /* 禁止选中 */
  -webkit-user-select: none;
  /* Chrome, Safari, Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* 标准属性 */

  /* 防止 iOS 长按菜单 */
  -webkit-touch-callout: none;
}

:root {
  --snyl-background: #f2f3f5;
  --snyl-navigation: #fff;
  --snyl-font-1: #252933;
  --snyl-font-2: #515767;
  --snyl-font-3: #8a919f;
  --snyl-font-4: #c2c8d1;
  --snyl-layer-1: #fff;
  --snyl-gray-2: #f2f3f5;
  --snyl-gray-3: #f7f8fa;
  --snyl-gray-1-1: #e4e6eb;
  --snyl-gray-1-2: #d2d4d9;
  --snyl-gray-1-2: rgba(228, 230, 235, 0.5);
  --snyl-brand-5-light: #eaf2ff;
  --snyl-graph_bg_regular: #F1F2F3;
  --snyl-hover-bg: #fbfbfb;
}